<template>
  <view class="page">
    <u-navbar :is-back="false" title="套餐管理" title-color="#000" title-size="38" :border-bottom="false">
      <template v-slot:right>
        <!-- <view class="notice">套餐已过期</view> -->
      </template>
    </u-navbar>

    <template v-if="!isIos">
      <view class="card-list">
        <view class="card-list-item">
          <view class="card-list-item-title">本月套餐剩余</view>
          <view class="card-list-item-num">{{ expireTime}}</view>
        </view>
        <view class="card-list-item">
          <view class="card-list-item-title">短信剩余</view>
          <view class="card-list-item-num">{{ myMailData.sms_num }}</view>
        </view>
        <view class="card-list-item">
          <view class="card-list-item-title">短信包剩余</view>
          <view class="card-list-item-num">{{
            myMailData.sms_package_num
          }}</view>
        </view>
      </view>

      <!-- 间隔 -->
      <view class="col-interval"></view>

      <view class="mail-list">
        <view class="mail-list-title">基础套餐</view>
        <template v-for="item in baseMailList">
          <view class="mail-list-item" :class="[item.base_id == baseId ? 'select' : '']"
            @click="selectBaseItem(item.base_id)">
            <image class="mail-list-item-select" :src="
                item.base_id == baseId
                  ? '../../static/img/select.svg'
                  : '../../static/img/no-select.svg'
              "></image>
            <view class="mail-list-item-text">
              <text class="mail-list-item-title">{{ item.name }}</text>
              <text class="mail-list-item-content">{{ item.car_num }}台车+{{ item.sms_num }}条短信</text>
            </view>
            <view class="mail-list-item-price">
              <text class="mail-list-item-price-icon">￥</text>
              {{ item.price }}
            </view>
          </view>
        </template>

        <view class="mail-list-title">短信包</view>
        <template v-for="item in smsMailList">
          <view class="mail-list-item" :class="[item.sms_id == smsId ? 'select' : '']"
            @click="selectSmsItem(item.sms_id)">
            <image class="mail-list-item-select" :src="
                item.sms_id == smsId
                  ? '../../static/img/select.svg'
                  : '../../static/img/no-select.svg'
              "></image>
            <view class="mail-list-item-text">
              <text class="mail-list-item-title">{{ item.name }}</text>
            </view>
            <view class="mail-list-item-price">
              <text class="mail-list-item-price-icon">￥</text>
              {{ item.price }}
            </view>
          </view>
        </template>

        <view class="mail-list-title">车辆拓展包</view>
        <template v-for="item in carMailList">
          <view class="mail-list-item" :class="[item.package_car_id == carId ? 'select' : '']"
            @click="selectCarItem(item.package_car_id)">
            <image class="mail-list-item-select" :src="
                item.package_car_id == carId
                  ? '../../static/img/select.svg'
                  : '../../static/img/no-select.svg'
              "></image>
            <view class="mail-list-item-text">
              <text class="mail-list-item-title">{{ item.name }}</text>
            </view>
            <view class="mail-list-item-price">
              <text class="mail-list-item-price-icon">￥</text>
              {{ item.price }}
            </view>
          </view>
        </template>
      </view>
      <view class="mail-btn btn" v-if="smsId||baseId||carId" @click="pay()"> 立即购买 </view>
    </template>
    <view class="ios-page" v-if="isIos">
      <image src="/static/img/ios.svg" mode="scaleToFill" />
      <view class="text">
        <view>您的账号受限，受限编码:100</view>
        <view>请联系客服18519105583解决</view>
      </view>
    </view>
    <u-toast ref="uToast" />
    <u-modal v-model="show" :content="content" :show-cancel-button="true" @confirm="payConfirm()" :z-index="9999">
    </u-modal>
  </view>
</template>

<script>
  import {
    getBaseMail,
    getSmsMail,
    getMyMail,
    getCarMail,
    payBase,
    paySms,
    payCar
  } from "@/api/mail.js";
  import {
    dateDiff
  } from "@/utils/rTime.js";
  export default {
    data() {
      return {
        baseMailList: [],
        smsMailList: [],
        carMailList: [],
        isIos: false,
        myMailData: {
          base_package_end: "",
          base_package_start: "",
        },
        baseId: null,
        smsId: null,
        carId: null,
        isPayShow:false,
        show: false,
        content: "确认要购买该套餐吗?"
      };
    },
    onShow() {
      if (uni.getSystemInfoSync().platform == "ios") {
        this.isIos = true;
      }
    },
    created() {
      this.showLoad()
    },
    computed: {
      // 套餐过期时间
      expireTime() {
        let date = dateDiff(
          this.myMailData.base_package_end,
          this.myMailData.base_package_start
        )
        if (date) {
          return date;
        } else {
          return 0;
        }
      },
    },
    methods: {
      showLoad() {
        getBaseMail().then((res) => {
          this.baseMailList = res.data.data;
        });
        getSmsMail().then((res) => {
          this.smsMailList = res.data.data;
        });
        getMyMail().then((res) => {
          this.myMailData = res.data.data;
        });
        getCarMail().then(res => {
          this.carMailList = res.data.data
        })
      },
      selectBaseItem(base_id) {
        this.smsId = null
        this.carId = null
        this.baseId = base_id
      },
      selectSmsItem(sms_id) {
        this.baseId = null
        this.carId = null
        this.smsId = sms_id
      },
      selectCarItem(car_id) {
        this.smsId = null
        this.baseId = null
        this.carId = car_id
      },
      async payConfirm() {
        let pay = null
        if (this.baseId) {
          await payBase(this.baseId).then(res => {
            if (res.data.code == 406) {
              this.$refs.uToast.show({
                title: res.data.msg,
                type: 'warning',
                position: 'bottom'
              });
            } else if (res.data.code == 200) {
              pay = res.data.data.pay
            }
          })
        }
        if (this.smsId) {
          await paySms(this.smsId).then(res => {
            if (res.data.code == 406) {
              this.$refs.uToast.show({
                title: res.data.msg,
                type: 'warning',
                position: 'bottom'
              });
            } else if (res.data.code == 200) {
              pay = res.data.data.pay
            }
          })
        }
        if (this.carId) {
         await payCar(this.carId).then(res => {
            if (res.data.code == 406) {
              this.$refs.uToast.show({
                title: res.data.msg,
                type: 'warning',
                position: 'bottom'
              });
            } else if (res.data.code == 200) {
              pay = res.data.data.pay
            }
          })
        }
        if (pay) {
          uni.requestPayment({
          provider: 'wxpay',
          ...pay,
          success(res) {
            this.$refs.uToast.show({
              title: "购买成功",
              type: 'success',
              position: 'bottom'
            });
          },
          fail(err) {
            this.$refs.uToast.show({
              title: "购买失败",
              type: 'error',
              position: 'bottom'
            });
          }
        })
        }
      },
      pay() {
        // #ifndef MP-WEIXIN
        this.$refs.uToast.show({
          title: "请在小程序中购买",
          type: 'error',
          position: 'bottom'
        });
        return
        // #endif
        this.show = true
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    position: relative;
  }

  .notice {
    margin-right: 30rpx;
    color: #666666;
    font-size: 24rpx;
  }

  .col-interval {
    height: 16rpx;
    background-color: #f3f6f8;
  }

  .ios-page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 80vh;

    .text {
      margin-top: 100rpx;
      font-size: 36rpx;
      padding: 0 100rpx;
      text-align: center;

      view {
        margin-top: 20rpx;
      }
    }
  }

  .card-list {
    margin: 30rpx;
    display: flex;
    justify-content: space-between;

    &-item {
      background: #f5f6f7;
      flex: 1;
      height: 146rpx;
      border-radius: 10rpx;
      padding: 20rpx;
      text-align: center;

      &:nth-child(2) {
        margin: 0 22rpx;
      }

      &-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #1a1a1a;
      }

      &-num {
        color: #2b6cfc;
        font-size: 40rpx;
        font-weight: bold;
        margin-top: 12rpx;
      }
    }
  }

  .mail-list {
    margin: 30rpx;

    &-title {
      font-size: 34rpx;
      font-weight: bold;
      color: #333333;
      padding-left: 30rpx;
      position: relative;
      margin-bottom: 24rpx;

      &::after {
        content: "";
        display: block;
        width: 8rpx;
        border-radius: 30rpx;
        height: 40rpx;
        background-color: #1a88ff;
        position: absolute;
        top: 50%;
        bottom: 50%;
        transform: translateY(-50%);
        left: 0;
      }
    }

    .select {
      border: 4rpx solid #2b6cfc;
      box-shadow: 0px 3rpx 6rpx rgba(41, 137, 253, 0.3);
    }

    &-item {
      border: 4rpx solid #cccccc;
      border-radius: 16rpx;
      height: 110rpx;
      margin-bottom: 24rpx;
      display: flex;
      align-items: center;
      padding: 0 32rpx;

      &-select {
        width: 36rpx;
        height: 36rpx;
      }

      &-text {
        flex: 1;
        padding-left: 20rpx;
      }

      &-title {
        margin-right: 20rpx;
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
      }

      &-content {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
      }

      &-price {
        color: #ff4343;
        font-size: 36rpx;
        font-weight: bold;

        &-icon {
          font-size: 24rpx;
        }
      }
    }
  }

  .mail-btn {
    width: 480rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #1a88ff 0%, #2c6bfc 100%);
    box-shadow: 0px 6px 18px rgba(26, 136, 255, 0.3);
    border-radius: 42px;
    color: #ffffff;
    font-size: 36rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
